<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
	<script type="text/javascript" src="Scripts/CanvasLib/3D/utils.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/3D/scene.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/3D/shader-manager.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/3D/shape3d.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/3D/pyramid.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/3D/paralelipiped.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/3D/animation.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/3D/geometry.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/3D/fucked-up-shape.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/3D/dom-utils.js"></script>
	
	
	<script type="text/javascript" src="Scripts/CanvasLib/scene.js"></script>
	<!-- END MOSHU'S -->
	
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library 3D - Tests</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
				<div class="property category">
					Scene Actions
				</div>
				<div class="property">
					<div class="label">Force redraw</div>
					<div class="value"><input type="button" value="Reset Scene" onclick="resetScene();"/></div>						
				</div>	
				<div class="property category">
					Animations
				</div>	
				<div class="property">
					<div class="label">Pyramid</div>						
					<div class="value"><input type="button" value="Rotate" onclick="addRotateAnimation()"/></div>						
				</div>	
				<div class="property">
					<div class="label">Pyramid</div>						
					<div class="value"><input type="button" value="Translate" onclick="addTranslateAnimation()"/></div>						
				</div>	
				<div class="property">
					<div class="label">Stop Animations</div>						
					<div class="value"><input type="button" value="Stop" onclick="stopAnimations()"/></div>						
				</div>	
				<div class="property category">
					Camera
				</div>	
				<div class="property">
					<div class="label">Translate</div>						
					<div class="value"><input type="button" value="Translate" onclick="translateCamera()"/></div>						
				</div>
				<div class="property">
					<div class="label">Rotate</div>						
					<div class="value"><input type="button" value="Rotate" onclick="rotateCamera()"/></div>						
				</div>
				<div class="property category">
					Behavior
				</div>
				<div class="property">
					<div class="label">Add random shapes</div>						
					<div class="value"><input type="button" value="Add" onclick="addRandom()"/></div>						
				</div>
				<div class="property">
					<div class="label">Camera movement</div>						
					<div class="value">Arrow keys, or +/- </div>
				</div>
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="500" height="500" id="c" style="border:2px solid black;"></canvas>
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Code samples</div>
			<div id="output" style="width:100%; height:90%;overflow-y:scroll;background:white;color:black;">
				<h2>Available functionalities</h2>
				<strong>Setup the scene</strong><br>
				<ul>
					<li>Set background image or color.</li>
				</ul>
				
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script id="shader-fs" type="x-shader/x-fragment">
    /*VERSION 1 with a static color*/
    /*precision mediump float;

    void main(void) {
        gl_FragColor = vec4(1.0, 0, 1.0, 1.0);
    }*/
	
	/*VERSION 2 with gradients*/
	precision mediump float;

	varying vec4 vColor;

	void main(void) {
		gl_FragColor = vColor;
	}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
	/*VERSION 1 with a static color*/
    /*attribute vec3 aVertexPosition;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    }*/
	
	/*VERSION 2 with gradients*/
	attribute vec3 aVertexPosition;
	attribute vec4 aVertexColor;

	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;
   
    varying vec4 vColor;

    void main(void) {
	  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.5);	  	 
	  vColor = aVertexColor;
	}
</script>

	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
		var scene = new Scene("c","3D");
		
		var pyramid = null;
		var paralelipiped = null;
		function createScene(){
			scene = new Scene("c","3D");
			scene.initShaders(["gradient-vertex-shader","gradient-fragment-shader"]);
			scene.context.clearColor(255.0, 255.0, 255.0, 255.0);
			scene.context.enable(scene.context.DEPTH_TEST);
			var points = [
				{x:0.0, y:1.0, z:0.0},// pyramid head
				{x:-1.0, y:-1.0, z:0.0},// base point 1
				{x:1.0, y:-1.0, z:1.0},// base point 2
				{x:1.0, y:-1.0, z:-1.0},// base point 3
				{x:-1.0, y:-1.0, z:-1.0},// base point 4
			];
			var points = [
				{x:0.0, y:0.0, z:4.0},// pyramid head
				{x:-1.0, y:-1.0, z:0.0},// base point 1
				{x:-1.0, y:1.0, z:0.0},// base point 2
				{x:1.0, y:1.0, z:0.0},// base point 3
				{x:1.0, y:-1.0, z:0.0},// base point 4
			];
			var colors = [
				{r:1.0, g:0.0, b:0.0, a:1.0},//triangle point 1 color
				{r:0.0, g:1.0, b:0.0, a:1.0},//triangle point 2 color
				{r:0.0, g:0.0, b:1.0, a:1.0},//triangle point 3 color
			];
			pyramid = new Pyramid({x:-0.5,y:2,z:-10},points, colors);
			pyramid.id = "pir1";
			pyramid.initVertices();
			scene.addShape(pyramid);
			
			var pyr = new Pyramid({x:3,y:2,z:-10},points, colors);
			pyr.id = "pir2";
			pyr.initVertices();
			scene.addShape(pyr);
			
			// this will build a cube i think
			var points = [
				{x:1.0, y:1.0, z:1.0},// base point 1
				{x:1.0, y:-1.0, z:1.0},// base point 2
				{x:-1.0, y:-1.0, z:1.0},// base point 3
				{x:-1.0, y:1.0, z:1.0},// base point 4				
				{x:1.0, y:1.0, z:-1.0},// base 2 point 1
				{x:1.0, y:-1.0, z:-1.0},// base 2 point 2
				{x:-1.0, y:-1.0, z:-1.0},// base 2 point 3
				{x:-1.0, y:1.0, z:-1.0},// base 2 point 4				
			];
			var colors = [
				{r:1.0, g:0.0, b:0.0, a:1.0},//triangle point 1 color
				{r:0.0, g:1.0, b:0.0, a:1.0},//triangle point 2 color
				{r:0.0, g:0.0, b:1.0, a:1.0},//triangle point 3 color
				{r:0.0, g:0.0, b:1.0, a:1.0},//triangle point 4 color
			];
			paralelipiped = new Paralelipiped({x:-3,y:-2,z:-10},points,colors);
			paralelipiped.id = "cube1";
			paralelipiped.initVertices();
			scene.addShape(paralelipiped);
			
			var vertices = SphereGeometry(null,4);
			var s = new FuckedUpShape({x:5,y:5,z:-10}, vertices, colors);
			//scene.addShape(s);
			
			scene.context.clearColor(255.0, 255.0, 255.0, 255.0);
			scene.context.enable(scene.context.DEPTH_TEST);
			scene.draw();
			
			setTimeout(function(){				
				var animation = new Rotate3D();
				animation.speed.y= 90;
				paralelipiped.addAnimation(animation);
				scene.animationContext.start();
				animation.start();
			},100);
			
			
		}
		
		
		function addRotateAnimation(){
			var animation = new Rotate3D();
			animation.speed.z= 90;
			pyramid.addAnimation(animation);
			scene.animationContext.start();
			animation.start();
		}
		
		function addTranslateAnimation(){
			var animation = new Translate3D();
			animation.speed.z = 0.5;
			pyramid.addAnimation(animation);
			scene.animationContext.start();
			animation.start();
		}
		
		function stopAnimations(){
			scene.animationContext.stop();
		}
		
		function resetScene(){
			// for now we recreate the scene...
			//createScene();
			scene.reset();
			
		}
		
		function translateCamera(){
			var animation = new TranslateCamera3D();
			animation.speed.x = -0.5;
			animation.speed.y = -0.5;
			this.scene.addCameraAnimation(animation);
						
			scene.animationContext.start();	
			animation.start();
		}
		function rotateCamera(){
			var animation = new RotateCamera3D();
			animation.speed.y = 90;
			this.scene.addCameraAnimation(animation);			
			
			scene.animationContext.start();
			animation.start();
		}
		
		function addRandom(){
			var points = [
				{x:0.0, y:0.0, z:4.0},// pyramid head
				{x:-1.0, y:-1.0, z:0.0},// base point 1
				{x:-1.0, y:1.0, z:0.0},// base point 2
				{x:1.0, y:1.0, z:0.0},// base point 3
				{x:1.0, y:-1.0, z:0.0},// base point 4
			];
			var colors = [
				{r:1.0, g:0.0, b:0.0, a:1.0},//triangle point 1 color
				{r:0.0, g:1.0, b:0.0, a:1.0},//triangle point 2 color
				{r:0.0, g:0.0, b:1.0, a:1.0},//triangle point 3 color
			];
			var obj = null;
			for(var i=0;i<8;i++){
				var x = Math.floor((Math.random() * 20) + 1)-10;
				var y = Math.floor((Math.random() * 20) + 1)-10;
				var z = Math.floor((Math.random() * 20) + 1)-10;
				debugger;
				obj = new Pyramid({x:x,y:y,z:z},points, colors);
				obj.initVertices();
				scene.addShape(obj);
			}
		}
		
		createScene();
		var domUtils = new DomUtils();
		var cameraTranslate = new TranslateCamera3D(scene);
		scene.addCameraAnimation(cameraTranslate);
		var moveSpeed = 5;
		domUtils.addEventSimple(window, "keydown", function(e){
			console.log("key-down");
			var evt=(e)?e:(window.event)?window.event:null;
			if(evt){
				var key=(evt.charCode)?evt.charCode:((evt.keyCode)?evt.keyCode:((evt.which)?evt.which:0));				
				
				if(key==37){
					cameraTranslate.speed.x=cameraTranslate.speed.y=cameraTranslate.speed.z = 0;
					cameraTranslate.speed.x = -moveSpeed;
					cameraTranslate.start();					
				}
				if(key==38){
					cameraTranslate.speed.x=cameraTranslate.speed.y=cameraTranslate.speed.z = 0;
					cameraTranslate.speed.y = moveSpeed;
					cameraTranslate.start();					
				}
				if(key==39){
					cameraTranslate.speed.x=cameraTranslate.speed.y=cameraTranslate.speed.z = 0;
					cameraTranslate.speed.x = moveSpeed;
					cameraTranslate.start();					
				}
				if(key==40){
					cameraTranslate.speed.x=cameraTranslate.speed.y=cameraTranslate.speed.z = 0;
					cameraTranslate.speed.y = -moveSpeed;
					cameraTranslate.start();					
				}		
				if(key==107){
					cameraTranslate.speed.x=cameraTranslate.speed.y=cameraTranslate.speed.z = 0;
					cameraTranslate.speed.z = -moveSpeed;
					cameraTranslate.start();					
				}		
				if(key==109){
					cameraTranslate.speed.x=cameraTranslate.speed.y=cameraTranslate.speed.z = 0;
					cameraTranslate.speed.z = moveSpeed;
					cameraTranslate.start();					
				}		
			}			
		});
		domUtils.addEventSimple(window, "keyup", function(e){
			console.log("key-up");
			cameraTranslate.stop();
		});
		
		
		
	</script>
</body>
</html>